<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .box{
      margin-top: 200px;
      display: flex;
      justify-content: center;
    }
    .title{
      background-color: #F5F7F7;
      height: 40px;
      font-size: 15px;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    .num{
      margin-left: auto;
      margin-right: 10px;
    }
    .left,.right{
      width: 200px;
      border: 1px solid #ccc;
    }
    .title input {
      margin-right: 10px;
    }
    li{
      line-height: 40px;
      padding-left: 10px;
    }
    li input{
      margin-right: 10px;
    }
    .center{
      display: flex;
      align-items: center;
      width: 160px;
      justify-content: center;
    }
    .right_btn{
      margin-right: 20px;
    }
</style>
<body>
    <div class="box">
       <div class="left">
          <div class="title">
             <input type="checkbox" onclick="checkAll(this,true)">
             <span>列表1</span>
             <span class="num">0/14</span>
          </div>
          <ul>
            
          </ul>
       </div>
       <div class="center">
          <button class="right_btn" onclick="cut(false)">到右边</button>
          <button class="left_btn" onclick="cut(true)">到左边</button>
       </div>
       <div class="right">
        <div class="title">
             <input type="checkbox" onclick="checkAll(this,false)">
             <span>列表1</span>
             <span class="num">0/14</span>
          </div>
          <ul>
           
          </ul>
       </div>
    </div>
</body>
</html>
<script>
   let data = [{
     flag: false, // 复选框是否选中
     isLeft: false, // 是否在左边，
     msg: "备选项 1"
   },{
     flag: false, // 复选框是否选中
     isLeft: true, // 是否在左边，
     msg: "备选项 2"
   },{
     flag: false, // 复选框是否选中
     isLeft: true, // 是否在左边，
     msg: "备选项 3"
   },{
     flag: false, // 复选框是否选中
     isLeft: true, // 是否在左边，
     msg: "备选项 4"
   },{
     flag: false, // 复选框是否选中
     isLeft: true, // 是否在左边，
     msg: "备选项 5"
   }]


   render();
   function render(){
      let strLeft = "",strRight = "";
      data.forEach((item,index) => {
        if (item.isLeft){
            strLeft+=` <li><input ${item.flag?'checked':''} type="checkbox" onclick="checkOne(true,${index})"><span>${item.msg}</span></li>`
        } else {
            strRight+=` <li><input ${item.flag?'checked':''} onclick="checkOne(false,${index})" type="checkbox"><span>${item.msg}</span></li>`
        }
      })
      document.querySelector('.left ul').innerHTML = strLeft;
      document.querySelector('.right ul').innerHTML = strRight;
      getNum();
   }


  function checkAll (val,isLeft) { // 全选 // val 传入的是当前的节点，isLeft 是否是左边的全选
    data.forEach(item => {
      if (item.isLeft == isLeft){
        item.flag = val.checked
      }
    })
    render();
  }

 function cut(val){ // 切换函数
    data.forEach(item => {
      if (item.flag){
        item.isLeft = val
        item.flag = false
      }
    })
    render();
    document.querySelector(`.${val?'right':'left'} input`).checked = false;
 }


function checkOne(val,i){ // 单选
   data[i].flag = !data[i].flag;
   let list = data.filter(item => item.isLeft == val);
   let bool = list.every(item => item.flag);
   document.querySelector(`.${val?'left':'right'} input`).checked = bool;
   getNum();
}

function getNum(){
  // 左边的总数
  let leftALL = data.filter(item => item.isLeft).length;
  // 左边的选中数量
  let leftChecked = data.filter(item => item.isLeft&&item.flag).length;

  // 右边的总数
  let rightALL = data.filter(item => !item.isLeft).length;
  // 右边的选中数量
  let rightChecked = data.filter(item => (!item.isLeft)&&item.flag).length;

  document.querySelector('.left .num').innerHTML = `${leftChecked}/${leftALL}`
  document.querySelector('.right .num').innerHTML = `${rightChecked}/${rightALL}`
}
</script>